import { List, Checkbox as AntdCheckbox } from 'antd'
import { CheckboxValueType } from 'antd/lib/checkbox/Group'
import Title from 'antd/lib/typography/Title'
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'

interface Props {
  handleFilter: (args: string[]) => void
}

const Checkbox = ({handleFilter}:Props) => {
  const data=[{name:"node"},{name:"javascript"}]
  const dispatch = useDispatch()
  const {category} =useSelector<AppState, CategoryState>(state=>state.category)
  useEffect(()=>{
    dispatch(getCategory())
  },[])
  const onChange = (checkedValue: CheckboxValueType[]) => {
    handleFilter(checkedValue as string[])
  }
  return (
    <>
      <Title level={4}>
        按照分类
      </Title>
      <AntdCheckbox.Group 
        className="checkboxFilter"
        options={category.result.map(item=>({
          label: item.name,
          value: item._id
        }))}
        onChange={onChange}
      />
    </>
  )
}
export default Checkbox